import React from "react";
import "./index.scss";
import bg from "@/assets/images/bg.png";
import logo from "@/assets/images/logo.png";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { Input, Checkbox, Button, Form, message } from "antd";
import { useNavigate } from "react-router-dom";
import { LoginFormType } from "@/interfaces/Login";
import type { FormProps } from "antd";
import { initLoginForm } from "./options";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const [messageApi, contextHolder] = message.useMessage();
  const onFinish: FormProps<LoginFormType>["onFinish"] = values => {
    console.log("Success:", values);
    navigate("/home");
  };
  const onFinishFailed: FormProps<LoginFormType>["onFinishFailed"] = errorInfo => {
    console.log("Failed:", errorInfo);
    messageApi.open({
      type: "error",
      content: "登录失败，请检查账号密码",
    });
  };

  return (
    <div className="login_wrap">
      {/* 消息提示 */}
      {contextHolder}
      {/* 左边 */}
      <div className="left_login_wrap">
        <img src={bg} alt="bg-image" />
      </div>
      {/* 右边 */}
      <div className="right_login_wrap flex_direction_column_center">
        {/* 标题 */}
        <div className="logo_title_wrap flex_column_between_center">
          <img src={logo} alt="login-logo" />
          <div className="logo_title">Transform your business communications</div>
        </div>
        {/* 输入框 */}
        <Form
          className="login_form_wrap"
          name="loginForm"
          initialValues={initLoginForm}
          autoComplete="off"
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
        >
          <div className="login_main_wrap flex_column_between">
            <Form.Item<LoginFormType>
              name="username"
              label={null}
              rules={[{ required: true, message: "Please input your username!" }]}
            >
              <Input
                size="large"
                placeholder="请输入账号"
                prefix={<UserOutlined style={{ color: "#16a1dc" }} />}
                className="login_input"
              />
            </Form.Item>
            <Form.Item<LoginFormType>
              name="password"
              label={null}
              rules={[{ required: true, message: "Please input your password!" }]}
            >
              <Input.Password
                placeholder="请输入密码"
                size="large"
                prefix={<LockOutlined style={{ color: "#16a1dc" }} />}
                className="login_input"
              />
            </Form.Item>
            <Form.Item<LoginFormType>
              className="password_checkbox_wrap"
              name="remember"
              valuePropName="checked"
              label={null}
            >
              <Checkbox style={{ color: "#16a1dc" }}>记住密码</Checkbox>
            </Form.Item>
          </div>
          {/* 登录按钮 */}
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit" className="login_btn" style={{ fontWeight: "bold" }}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default Index;
